import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import NumStatus from '@/store/NumStatus'

export default function index() {
  const { num, sarr } = useSelector((state: RootState) => ({
    num: state.numReducer.num,
    sarr: state.arrReducer.sarr
  }))

  // 修改仓库的数据
  const dispatch = useDispatch()

  const onAddNum = () => {
    dispatch({ type: "add2", val: 20 })
  }

  const onAddNumAsync = () => {

    // 内部帮我们调用里面的箭头函数 
    dispatch((dis:Function)=>{
      setTimeout(()=>{
        dis({ type: "addAsync" })
      },1000)
    })

    // 优化redux-thunk的异步写法
    // dispatch(NumStatus.asyncActions.addAsync)
  }

  const onPush = () => {
    dispatch({ type: "sarrpush" })
  }


  return (
    <div>
      <h1>Page1页面</h1>
      <h2>{num}</h2>
      <button onClick={onAddNum}>同步按钮</button>
      <button onClick={onAddNumAsync}>异步按钮</button>
      <p>{sarr}</p>
      <button onClick={onPush}>往数组添加元素</button>
    </div>
  )
}
